import React, {Component} from 'react';
import './index.less';
import {base, deepClone} from 'nc-lightapp-front';

const {NCModal, NCSelect, NCButton, NCPopconfirm, NCTable} = base;
const {Header: NCModalHeader, Body: NCModalBody, Footer: NCModalFooter} = NCModal;
const NCOption = NCSelect.NCOption;

class SortModal extends Component {
    constructor(props) {
        super(props);

        this.state = {
            selectedField: '',
            selectedAscendFlag: true,
            sortField: []
        };

        this.closeModal = this.closeModal.bind(this);
        this.showModalHandle = this.showModalHandle.bind(this);
        this.selectChangeHandle = this.selectChangeHandle.bind(this);
        this.addOneRow = this.addOneRow.bind(this);
        this.operateTable = this.operateTable.bind(this);
        this.exchangeTable = this.exchangeTable.bind(this);
        this.moveTableRow = this.moveTableRow.bind(this);
        this.removeTableRow = this.removeTableRow.bind(this);
        this.cleanTable = this.cleanTable.bind(this);
        this.getTableData = this.getTableData.bind(this);
        this.beSure = this.beSure.bind(this);
    }

    beSure() {
        this.closeModal();
        this.setState({
            selectedField: '',
            selectedAscendFlag: true
        });
        this.props.onSure(this.state.sortField);
    }

    cleanTable() {
        this.setState({
            sortField: []
        })
    }

    operateTable(type) {
        return (text, record, index) => {
            return () => {
                if (type === 'exchange') {
                    this.exchangeTable(index);
                } else if (type === 'delete') {
                    this.removeTableRow(index);
                } else if (type === 'up' || type === 'down') {
                    this.moveTableRow(index, type);
                }
            }
        }
    }

    exchangeTable(index) {
        const {sortField} = this.state;
        sortField[index].isasc = !sortField[index].isasc;
        this.setState({
            sortField
        })
    }

    removeTableRow(index) {
        const {sortField} = this.state;
        sortField.splice(index, 1);
        this.setState({
            sortField
        })
    }

    moveTableRow(index, type) {
        const {sortField} = this.state;
        if ((type === 'up' && index === 0) || (type === 'down' && index === sortField.length - 1)) return;
        const index2 = type === 'up' ? index - 1 : index + 1;
        sortField[index] = sortField.splice(index2, 1, sortField[index])[0];
        this.setState({
            sortField
        })
    }

    addOneRow() {
        const {selectedField, selectedAscendFlag, sortField} = this.state;
        if (!selectedField || sortField.findIndex(item => item.value === selectedField) > -1) return;
        const selectedFieldObject = this.props.allSortField.find(item => item.value === selectedField);
        sortField.push({
            ...selectedFieldObject,
            isasc: selectedAscendFlag
        });
        this.setState({
            sortField
        })
    }

    selectChangeHandle(type) {
        return (value) => {
            let field = type === 'field' ? 'selectedField' : 'selectedAscendFlag';

            this.setState({
                [field]: value
            });
        }
    }

    showModalHandle() {
        this.getTableData();
    }

    getTableData() {
        const {sort_field} = this.props;
        this.setState({
            sortField: deepClone(sort_field)
        });
    }

    closeModal() {
        this.props.onClose && this.props.onClose();
    }

    render() {
        const {visible, allSortField} = this.props;
        const {selectedAscendFlag, selectedField, sortField} = this.state;
        const columns = [
            {title: this.props.json['hi6007-000076'], dataIndex: 'name', key: 'name', width: '135px'}, /* 国际化处理： 字段名称*/
            {
                title: this.props.json['hi6007-000070'], dataIndex: 'isasc', key: 'isasc', /* 国际化处理： 升降,升降*/
                width: '135px',
                render: (flag) => {
                    return flag ? this.props.json['hi6007-000077'] : this.props.json['hi6007-000178'];
                    /* 国际化处理： 升序,降序,降序*/
                }
            },
            {
                title: this.props.json['hi6007-000029'], /* 国际化处理： 操作*/
                width: '190px',
                render: (text, record, index) => {
                    return (
                        <div className="sort-operate-box">
                            <a
                                href="javascript:void(0)"
                                onClick={this.operateTable('exchange')(text, record, index)}
                            >
                                {this.props.json['hi6007-000079']}{/* 国际化处理： 切换*/}
                            </a>
                            <a
                                href="javascript:void(0)"
                                onClick={this.operateTable('delete')(text, record, index)}
                            >
                                {this.props.json['hi6007-000031']}{/* 国际化处理： 删除*/}
                            </a>
                            <a
                                href="javascript:void(0)"
                                onClick={this.operateTable('up')(text, record, index)}
                            >
                                {this.props.json['hi6007-000080']}{/* 国际化处理： 上移*/}
                            </a>
                            <a
                                href="javascript:void(0)"
                                onClick={this.operateTable('down')(text, record, index)}
                            >
                                {this.props.json['hi6007-000081']}{/* 国际化处理： 下移*/}
                            </a>
                        </div>
                    );
                }
            }];
        return (
            <NCModal
                show={visible}
                className="sort-modal-wrapper"
                onHide={this.closeModal}
                onEntered={this.showModalHandle}
                backdrop={'static'}
            >
                <NCModalHeader
                    closeButton={true}
                >
                    {this.props.json['hi6007-000068']}{/* 国际化处理： 排序*/}
                </NCModalHeader>
                <NCModalBody>
                    <div className="sort-modal-content">
                        <label className="sort-modal-label">{this.props.json['hi6007-000082']}</label>{/* 国际化处理： 排序方式*/}
                        <NCSelect
                            className="sort-modal-select"
                            value={selectedField}
                            onChange={this.selectChangeHandle('field')}
                        >
                            {allSortField.map((item) => {
                                return (
                                    <NCOption
                                        value={item.value}
                                    >
                                        {item.name}
                                    </NCOption>
                                );
                            })}
                        </NCSelect>
                        <NCSelect
                            className="sort-type-select"
                            value={selectedAscendFlag}
                            onChange={this.selectChangeHandle('type')}
                        >
                            <NCOption
                                value={true}
                            >
                                {this.props.json['hi6007-000077']}{/* 国际化处理： 升序*/}
                            </NCOption>
                            <NCOption
                                value={false}
                            >
                                {this.props.json['hi6007-000178']}{/* 国际化处理： 降序*/}
                            </NCOption>
                        </NCSelect>
                        <div className="sort-modal-button-wrapper">
                            <NCButton
                                colors="border"
                                onClick={this.addOneRow}
                            >
                                {this.props.json['hi6007-000083']}{/* 国际化处理： 增加*/}
                            </NCButton>
                        </div>
                    </div>
                    <div className="sort-modal-table">
                        <NCTable
                            columns={columns}
                            data={sortField}
                            lazyload={false}
                            scroll={{x: true, y: true}}
                        />
                    </div>
                </NCModalBody>

                <NCModalFooter>
                    <NCPopconfirm
                        trigger="click"
                        placement="top"
                        content={this.props.json['hi6007-000078']}/* 国际化处理： 是否清空数据库中保存的排序条件？*/
                        onClose={this.cleanTable}
                        className="sort-modal-confirm-pop"
                    >
                        <NCButton
                            shape="border"
                            className="sort-clean-btn"
                        >
                            {this.props.json['hi6007-000084']}{/* 国际化处理： 清空*/}
                        </NCButton>
                    </NCPopconfirm>
                    <NCButton
                        colors="primary"
                        onClick={this.beSure}
                    >
                        {this.props.json['hi6007-000174']}{/* 国际化处理： 确认*/}
                    </NCButton>
                    <NCButton
                        shape="border"
                        onClick={this.closeModal}
                    >
                        {this.props.json['hi6007-000005']}{/* 国际化处理： 取消*/}
                    </NCButton>
                </NCModalFooter>
            </NCModal>
        );
    }
}

export default SortModal;
